﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drag</title>

    <link href="static/drag-master/resize/resize.css" rel="stylesheet" />
    <style>
        .box {
            position: absolute;
            height: 50px;
            margin-bottom: 0px;
            cursor: move;
        }

        .box1 {
         
            top: 10px;
            width: 50px;
            background-color: red;
        }

        .box2 {
           
            top: 100px;
            width: 80px;
            background-color: green;
        }

        .box3 {
           
            top: 160px;
            width: 60px;
            background-color: yellow;
        }

        .box4 {
         
            top: 260px;
            width: 100px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <!-- <div class="app" style="width:100px;height:100px;">
        <div class="test" style="width:100%;height:100%;"></div>
    </div> -->

    <script>
        // document.querySelector('.app').addEventListener('click', (e) => {
        //     console.log(e.target.tagName, e.target.classList)
        // }, true)

        // document.addEventListener('click', (e) => {
        //     console.log(e.target.tagName, e.target.classList)
        // }, true)

    </script>
    <div id="workcenter" style="position:absolute;zoom:0.5;left:200px;top:200px;width:1000px;height:600px;border:1px dotted ">
        <div id="dm1" class="box box1"></div>
        <div id="dm2" class="box box2"></div>
        <div id="dm3" class="box box3"></div>
        <div id="dm4" class="box box4">
            <div class="resize-box">
                <div class="resize resize-line line-xt">
                    <div class="line-middle-dot"></div>
                </div>
                <div class="resize resize-line line-xb">
                    <div class="line-middle-dot"></div>
                </div>
                <div class="resize resize-line line-yl">
                    <div class="line-middle-dot"></div>
                </div>
                <div class="resize resize-line line-yr">
                    <div class="line-middle-dot"></div>
                </div>
                <div class="resize resize-dot dot-lt"></div>
                <div class="resize resize-dot dot-rt"></div>
                <div class="resize resize-dot dot-lb"></div>
                <div class="resize resize-dot dot-rb"></div>
            </div>
        </div>
        <div id="dm5" class="box box3"></div>
    </div>
    <script src="static/jquery/jquery-2.1.4.min.js"></script>

    <script src="static/drag-master/dragmaster.js"></script>

    <script>


        // demo url https://think2011.net/ref-line/
        const refLine = new RefLine();

        const boxes = document.querySelectorAll('.box');

        var dm = new DragMaster({
            selector: '.box',

            downCallBack (currElem) {

                  currElem.classList.add('curr-move')
            },
            moveCallBack (currElem) {
                   refLine.check(currElem, boxes)
            },
            upCallBack () {
                  refLine.uncheck()
            }
        });
        dm.adddiv({ "id": "dm1" });
        dm.adddiv({ "id": "dm2" });
        dm.adddiv({ "id": "dm3" });
        dm.adddiv({ "id": "dm4" });
        dm.adddiv({ "id": "dm5" });
    </script>
</body>
</html>